@import shared.VarTool
@()
	@main("Home") {
		<style>
				.carousel-caption {
					background-color: #555;
					opacity: 0.8;
					z-index: 1;
					width: 100%;
					bottom: 0px;
					padding-top: 0px;
					right: 30%;
					left: 0%;
					padding-bottom: 0px

				}

				.myFont {
					font-size: 15px;
					text-align: center;
				}

			.eachImg{
				height: 95px;
			}

			.pathwayImg{
				height: 75px;
			}

			.bold{
				font-weight: bold;
			}

				.overviewTitle{
					font-size: 16px;
					background-image:linear-gradient(to bottom, #CDE1EE 0, white 100%);
					padding-left: 5px;
					padding-right: 5px;
					padding-top: 5px;
					padding-bottom: 5px;
					display: inline-block;
				}

				.overviewTitleRow{
					border-top: 1px solid #CDE1EE;
				}

				.panel-heading {
					padding: 10px 15px;
					border-bottom: 1px solid transparent;
					border-bottom-color: transparent;
					border-top-left-radius: 3px;
					border-top-right-radius: 3px;
				}

				h4, .h4, h5, .h5, h6, .h6 {
					margin-top: 0px;
					margin-bottom: 0px;
				}

				.panel-default > .panel-heading {
					color: #333;
					background-color:#CDE1EE;
					border-color: #ddd;
				}

				.panel-default > .panel-heading {
					background-image: none;
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
					background-repeat: repeat-x
				}

				.myUl li {
					text-align: justify;
				}

		</style>

		<div class="panel panel-default" style="margin-bottom: 0px">
			<div class="panel-body">
				<div class="row">
					<div class="col-md-7">

						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="bold">Welcome to exoRBase 2.0</h4>
							</div>
							<div class="panel-body">
								<p class="text-justify" style="font-size: 15px">
									exoRBase is a repository of extracellular vesicles (EVs) long RNAs (exLRs) derived from RNA-seq data analyses in different human body fluids. The exLRs contain messenger RNA (mRNA), long non-coding RNA (lncRNA), and circular RNA (circRNA).
								</p>
								<p class="text-justify" style="font-size: 15px">
									Here, we have updated the exoRBase database to version 2.0 by collecting about 1,000 RNA-seq data of EVs from four types of human body fluids. exoRBase 2.0 features the integration and visualization of RNA expression profiles, as well as the functional pathway-level changes and the heterogeneity of circulating-EVs origins.
								</p>
								<p class='text-justify' style="font-size: 15px">
									exoRBase 2.0 provides the comprehensive annotation and expression landscapes of exLRs. It will facilitate the identification of novel exLR signatures from human body fluids and will help discover new circulating biomarkers for the improvement of tumor diagnosis and therapy.
								</p>
							</div>
						</div>

					</div>

					<div class="col-md-5" style="margin-top: 0px;">

						<form style="margin-bottom: 15px" id="form" method="post" action="@routes.MrnaController.toResultByName" class="form-inline" autocomplete="off">
							<div class="input-group" style="width: 100%">
								<input type="text" name="id" class="form-control"
								required placeholder="e.g.TRAF3,CELSR1" id="geneName" autocomplete="off"/>
								<span class="input-group-btn">
									<button class="btn btn-primary" type="submit"
									style="border-top-right-radius: 4px;
										border-bottom-right-radius: 4px">Search</button>
								</span>
							</div>
						</form>


						<div id="myNiceCarousel" class="carousel" data-ride="carousel" data-interval="3000">
								<!-- 轮播项目 -->
							<div class="carousel-inner">
								<div class="item active screenshot">
									<img src="@routes.Assets.at("images/Profiles-Heatmap chart.png")" style="height: 300px;">
									<div class = "carousel-caption" > Profiles-Heatmap chart
									</div>
									</div>
									<div class = "item screenshot" >
									<img alt = "Second slide" style = "height: 300px;"
									src = "@routes.Assets.at("images/Profiles-Boxplot chart.png")">
									<div class="carousel-caption">
										Profiles-Boxplot chart
									</div>
								</div>
								<div class="item screenshot">
									<img alt="Second slide" style="height: 300px;"
									src="@routes.Assets.at("images/Origins-Percentage chart.png")">
									<div class="carousel-caption">
										Origins-Percentage chart
									</div>
								</div>
								<div class="item screenshot">
									<img alt="Second slide" style="height: 300px;"
									src="@routes.Assets.at("images/Origins-Cumulative percentage chart.png")">
									<div class="carousel-caption">
										Origins-Cumulative percentage chart
									</div>
								</div>
							</div>
								<!-- 项目切换按钮 -->
							<a class="left carousel-control" href="#myNiceCarousel"
							data-slide="prev"> <span class="fa fa-chevron-left"></span>
							</a> <a class="right carousel-control" href="#myNiceCarousel"
						data-slide="next"> <span class="fa fa-chevron-right"></span>
						</a>
						</div>
					</div>

					<div class="col-sm-7">

						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 style="font-weight: bold">Overview</h4>
							</div>
							<div class="panel-body" style="padding-top:5px">
								<div id="longRnas" style="margin-bottom: 35px">

									<div class="row" style="margin-bottom: 5px">
										<div class="col-sm-12 overviewTitleRow" align="center">
											<span class="myFont overviewTitle" style="font-weight: bold;">
												exLRs
											</span>
										</div>
									</div>

									<div class="myJustify">

										<div >
											<div class="myFont" >
												<a href="@routes.BrowseController.toIndex()?kind=@VarTool.mRnaKind" target="_blank">mRNA</a>
											</div>
											<div style="line-height: 35px">
												<img src="/assets/images/mRNA-logo.gif" style="height: 20px;">
												<span class="myFont" style="font-weight: bold">19,643</span>
											</div>
										</div>

										<div >
											<div class="myFont">
												<a href="@routes.BrowseController.toIndex()?kind=@VarTool.lncRnaKind" target="_blank">lncRNA</a>
											</div>
											<div style="line-height: 35px">
												<img src="/assets/images/lncRNA-logo.gif" style="height: 20px;
													margin-bottom: 5px">
												<span class="myFont" style="font-weight: bold">15,645</span>
											</div>
										</div>

										<div >
											<div class="myFont" >
												<a href="@routes.BrowseController.toIndex()?kind=@VarTool.circRnaKind" target="_blank">circRNA</a>
											</div>
											<div style="line-height: 35px">
												<img src="/assets/images/circRNA-logo.gif" style="height: 20px;
													margin-bottom: 4px">
												<span class="myFont" style="font-weight: bold">79,084</span>
											</div>
										</div>

									</div>

								</div>

								<div id="pathway" style="margin-bottom: 35px;">

									<div class="row" style="margin-bottom: 5px">
										<div class="col-sm-12 overviewTitleRow" align="center">
											<span class="myFont overviewTitle" style="font-weight: bold;">
												Pathways and Tissue/Cell origins
											</span>
										</div>
									</div>

									<div  class="myJustify" style="">

										<div >
											<div style="line-height: 35px">
												<img class="pathwayImg" src="@routes.Assets.at("images/pathway.png")" style="
							margin-bottom: 4px">
												<div class="myFont" >
												<a href="@routes.BrowseController.toIndex()?kind=@VarTool.pathwayKind" target="_blank">Pathway:</a>
												<span class="myFont bold">11,536</span>
											</div>
										</div>
									</div>

									<div >
										<img class="pathwayImg" src="@routes.Assets.at("images/cell.png")" style="
						margin-bottom: 4px">
										<div class="myFont" >
										<a href="@routes.CellController.proportion()" target="_blank">Tissue/Cell origin:</a>
										<span class="myFont bold">39</span>
									</div>
								</div>

							</div>

						</div>

						        <div id="samples">

							<div class="row" style="margin-bottom: 5px">
								<div class="col-sm-12 overviewTitleRow" align="center">
									<span class="myFont overviewTitle" style="font-weight: bold;">
										Samples
									</span>
								</div>
							</div>

							<div class="myJustify" >

								<div >
									<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">
										<img class="eachImg" src="@routes.Assets.at("images/blood.png")" style="">
										</a>

										<div class="myFont" >
										<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">Blood:</a>
									<span class="myFont bold">869</span>
								</div>
							</div>

							<div >
								<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">
									<img class="eachImg" src="@routes.Assets.at("images/urine.png")" style="">
									</a>
									<div class="myFont" >
									<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">Urine:</a>
								<span class="myFont bold">16</span>
							</div>
						</div>

						<div >
							<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">
								<img class="eachImg" src="@routes.Assets.at("images/csf.png")" style="">
								</a>
								<div class="myFont" >
								<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">CSF:</a>
							<span class="myFont bold">5</span>
						</div>
					</div>

					<div >
						<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">
							<img class="eachImg" src="@routes.Assets.at("images/bile.png")" style="">
							</a>
							<div class="myFont" >
							<a href="@routes.StatisticsController.index()#sampleNumber" target="_blank">Bile:</a>
						<span class="myFont bold">15</span>
					</div>
				</div>

			</div>

		</div>

							    </div>
						</div>

		</div>

					<div class="col-sm-5" style="margin-top: 10px">
						<h4 >Release Notes&News</h4>

						<ul style="margin-left: -20px;" class="myUl">
							<li>
								exoRBase 2.0 is published in Nucleic Acids Research. [November 2021] [
									<a href="https://doi.org/10.1093/nar/gkab1085" target="_blank">Full Text</a>]
							</li>
							<li>
								exoRBase has been updated to verson 2.0. [August, 2021] [<a href="http://www.exorbase.org:9000" target="_blank">
									Version 1.0</a>]
							</li>
							<li>
								exoRBase has received  more than 70,000 universal visitors. [June, 2021]
							</li>
							<li>
								EV-origin: enumerating the tissue-cellular origin of circulating extracellular vesicles using exLR profile, published in Comput Struct Biotechnol J. [October 2020] [<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7588739/" target="_blank">
								Full Text</a>]
							</li>
							<li>
								The exLR biomarkers used for the detection of pancreatic ductal adenocarcinoma published in Gut. [March 2020] [<a href="https://gut.bmj.com/content/69/3/540.long" target="_blank">
								Full Text</a>]
							</li>
							<li>
								The feature and application of human blood exLRs published in Clin Chem. [March  2019] [<a href="https://doi.org/10.1373/clinchem.2018.301291" target="_blank">
								Full Text</a>]
							</li>
							<li>
								exoRBase has received 10,000 visitors. [May, 16 2018]
							</li>
							<li>
								exoRBase is published in Database Issue of Nucleic Acids Research. [October 2017] [<a href="https://dx.doi.org/10.1093/nar/gkx891" target="_blank">
								Full Text</a>]
							</li>
							<li>
								exoRBase is publicly accessible. [August 2017]
							</li>
							<li>
								77 experimental validations from 18 published literatures have been included. [July 2017]
							</li>
							<li>
								GTEx and circBase data have been used to annotate possible original cells/tissues of exosomal RNAs. [July 2017]
							</li>
							<li>
								92 RNA-seq samples from seven experiments have been integrated into exoRBase. [June 2017]
							</li>
						</ul>

					</div>


				</div>


			</div>
		</div>

	<div style="display: none">
		<h4 style="margin-top: 35px">Global Visitors</h4>

		<div>
			<script type="text/javascript" src="//rf.revolvermaps.com/0/0/7.js?i=51bv1n0un8t&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;br=5&amp;sx=0" async="async"></script>
		</div>
	</div>

		<script>
				$(function () {

				    Home.init

				})
		</script>


	}
